<template>
  <!-- 作业查询模块-任务查询-续期核保任务历史查询页面 -->
  <div class="fillcontain">
    <!-- 查询条件 -->
    <div class="fastQuery">
      <el-row>
        <el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
        <el-col :span="10"></el-col>
        <el-col :span="4" class="moreCondition">
          <span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
          <span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div>
    <el-form v-show="isShow" :model="searchParams" label-width="100px" class="search_container">
      <el-row>
        <el-col :span="6" class="common-box">
          <el-form-item label="保单号" prop="chdrnum">
            <el-input v-model="searchParams.chdrnum" placeholder="保单号"
                      oninput="if(value.length>8) value=value.slice(0,8)"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="common-box">
          <el-form-item label="被保人姓名" prop="insuredname">
            <el-input v-model="searchParams.insuredname" placeholder="被保人姓名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="common-box">
          <el-form-item label="检出人" prop="checkoutusrid">
            <el-input v-model="searchParams.checkoutusrid" placeholder="检出人" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="common-box">
          <el-form-item label="案件状态" prop="flag01">
            <el-select v-model="searchParams.flag01" placeholder="案件状态" clearable>
              <el-option v-for="item in flag01s" :key="item.value" :label="item.option" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <!-- 查询结果 -->
      <div class="table_container">
        <el-table v-loading="loading" :data=" tableData" highlight-current-row
                  header-cell-class-name="table-header-class"
                  style="width:100%">
          <el-table-column type="selection" :selectable="interceptVip">
          </el-table-column>
          <el-table-column min-width="120" property="checkoutusrid" label="检出人" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="100" property="orgName" label="机构" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="50" property="channel" label="渠道" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="100" property="chdrnum" label="保单号" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="100" property="insuredname" label="被保险人" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="mainContractName" label="主合同名称" align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="archtypeName" label="案件类型" align='center' sortable
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="flag01Name" label="案件状态" sortable align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="100" property="dateup02" label="保单周年日" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="rrtdat" min-width="110" label="Rarate Date" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="100" property="trandate" label="抽档日期" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="120" property="hisUser" label="历史处理人" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="160" property="hisDate" label="处理日期" align='center' show-overflow-tooltip>
          </el-table-column>
          <el-table-column min-width="50" label="备注" align='center'>
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="showRemark(scope.row.taskno)" :disabled="!interceptVip(scope.row,scope.index)">备注</el-button>
            </template>
          </el-table-column>
          <el-table-column min-width="80" label="影像信息" align='center' fixed="right">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" icon="el-icon-camera" @click="showImage(scope.row)">影像信息</el-button> -->
              <span class="operationIcon" @click="showImage(scope.row)" :style="{'pointer-events':!interceptVip(scope.row, scope.index) ? 'none': ''}">
								<el-tooltip class="item" effect="light" content="影像信息" placement="top">
									<i class="el-icon-camera"></i>
								</el-tooltip>
							</span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes"
                             :page-size="paginations.pageSize"
                             :layout="paginations.layout" :total="paginations.total"
                             :current-page='paginations.pageIndex' @current-change='handleCurrentChange'
                             @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 备注 -->
    <remark-list :business="'REAL'" :taskNo="remarkTaskNo" :drawer="showRemarkFlag" @close="hideRemark"></remark-list>

    <!--影像列表-->
    <cdfs-image-list :drawer="showImageFlag" :applnum="showImageApplnum" @close="hideImage"></cdfs-image-list>

  </div>
</template>

<script>
  import constant from '@/utils/constant';
  import TaskConstants, {call} from "@/api/taskManager/common"
  import taskConstants, {getSelectList} from '@/utils/taskConstants';
  import RemarkList from "../../taskCenter/remarkList";
  import cdfsImageList from "@/page/common/cdfsImageList";
  import {checkName, isNotNumber} from "@/api/refund/RefundCommon";
  import {queryUdwWorkPoolSelectFlag01} from "@/api/taskCenter/renewalTask";
  import {getSsyOrgMap} from "@/api/taskCenter/taskCommon";

  export default {
    components: {
      RemarkList,
      cdfsImageList
    },
    data() {
      return {
        isShow: false,
        levels: TaskConstants.level,
        emptySearchParams: {},
        insmains: TaskConstants.insmain, //险种类型
        ssyMap: [],
        flag01s: [
          {value: '0', option: "待处理"},
          {value: '1', option: "受理"},
          {value: '2', option: "核保"},
          {value: '3', option: "核发信件"},
          {value: '4', option: "出信中"},
          {value: '5', option: "照会中"},
          {value: '6', option: "照会已回复待处理"},
          {value: '7', option: "送其他部门处理"},
          {value: '8', option: "核决"},
          {value: '9', option: "结案"},
          {value: 'A', option: "撤回"},
          {value: 'B', option: "结案失败"},
          {value: 'C', option: "照会逾期未回复"},
          {value: 'D', option: "特殊件照会回复待处理"},
        ],
        tableData: [],
        remarkTaskNo: "",
        showRemarkFlag: false,
        showImageFlag: false,
        showImageApplnum: '',
        // 查询条件
        searchParams: {
          chdrnum: '', // 保单号
          insuredname: '', // 被保人姓名
          checkoutusrid: '', // 检出人
          flag01: '', // 案件状态
          pageNumber: '',
          pageSize: '',
        },
        appFroms: [],
        loading: false,
        //需要给分页组件传的信息
        paginations: {
          total: 0, // 总数
          pageIndex: 1, // 当前位于哪页
          pageSize: 10, // 1页显示多少条
          pageSizes: [5, 10, 15, 20], //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
        },
      }
    },
	activated(){
	    document.onkeydown = (event)=>{
	        var e = event || window.event || arguments.callee.caller.arguments[0];
	        if (e && e.keyCode == 113) {
	            this.search();
	        }
	    };
	}, 
    created() {
      this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
      // this.getList();
    },
    mounted() {
      getSsyOrgMap().then(data => this.ssyMap = data);
      this.appFroms = getSelectList(taskConstants.appFrom);
      this.queryUdwWorkPoolSelectFlag01();
    },
    methods: {
      //案件状态查询
      queryUdwWorkPoolSelectFlag01() {
        queryUdwWorkPoolSelectFlag01().then(res => {
          if (res.resultCode == constant.SUCCESS) {
            this.flag01s = res.data;
          } else {
            this.$message.error(res.resultMsg);
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },
      getOrgName(value) {
        if (this.ssyMap && this.ssyMap[value] && this.ssyMap[value].sorgname)
          return this.ssyMap[value].sorgname;
        else
          return value;
      },
      showImage(row) {
        // vip数据管控start
        if(row.taskno.indexOf("*") !== -1){
          this.$message({
            message: '该数据为vip保单,暂无操作权限!',
            type: 'error'
          });
          return false
        }
        // vip数据管控end
        this.showImageApplnum = row.caseno;
        this.showImageFlag = true;
      },
      hideImage() {
        this.showImageApplnum = "";
        this.showImageFlag = false;
      },
      getArchtypeName(value) {
        if (taskConstants.archtype[value]) {
          return taskConstants.archtype[value];
        } else
          return value;
      },
      getFlag01Name(value) {
        let val = value;
        for (let key in this.flag01s) {
          if (this.flag01s[key].value == value) {
            val = this.flag01s[key].option;
            break;
          }
        }
        return val;
      },
      /* 时间初始设置 */
      clearTimeSetDefault(val) {
        if (val == null) {
          val = '';
        }
      },
      showRemark(taskNo) {
        // vip数据管控start
        if(taskNo.indexOf("*") !== -1){
          this.$message({
            message: '该数据为vip保单,暂无操作权限!',
            type: 'error'
          });
          return false
        }
        // vip数据管控end
        this.remarkTaskNo = taskNo;
        this.showRemarkFlag = true;
      },
      hideRemark() {
        this.remarkTaskNo = "";
        this.showRemarkFlag = false;
      },
      showorhide() {
        this.isShow = !this.isShow;
      },
      search() {
        if (this.searchParams.chdrnum != "") {
          if (isNotNumber(this.searchParams.chdrnum) || this.searchParams.chdrnum.length != 8) {
            this.$message.error("请正确输入保单号！");
            return;
          }
        }
        if (this.searchParams.insured != "" && checkName(this.searchParams.insured)) {
          this.$message.error("请正确输入被保人姓名！");
          return;
        }
        if (this.searchParams.checkoutusrid != "" && checkName(this.searchParams.checkoutusrid)) {
          this.$message.error("请正确输入检出人！");
          return;
        }
        this.paginations.pageIndex = 1;
        this.getList();
      },
      show() {
        this.$store.dispatch('loading/CHANGE_LOADING', true);
      },
      cancle() {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      },
      // 查询列表
      getList() {
        this.paginations.total = 0;
        this.tableData = [];
        this.searchParams.pageNumber = this.paginations.pageIndex;
        this.searchParams.pageSize = this.paginations.pageSize;
        this.show();
        // page(this.searchParams).then(res => {
        //   console.log('参数', this.searchParams);
        //   console.log('结果', res);
        //   this.cancle();
        //   if (res.resultCode == constant.SUCCESS && res.data && res.data.list.length) {
        //     this.paginations.total = res.data.total;
        //     this.tableData = res.data.list;
        //     this.tableData.forEach(item => {
        //       item["orgName"] = this.getOrgName(item.organ);
        //       // item["nodeName"] = this.getNodeName(item.routeid);
        //       item["archtypeName"] = this.getArchtypeName(item.archtype);
        //       item["flag01Name"] = this.getFlag01Name(item.flag01);
        //     })
        //   }
        //
        // }).catch(err => {
        //   this.cancle();
        // });
        call(TaskConstants.apis['renewalQuery'], this.searchParams, "post").then(res => {
          this.cancle();
          console.log('续期核保历史任务查询结果：', res);
          if (res.resultCode == constant.SUCCESS && res.data && res.data.list.length) {
            this.paginations.total = res.data.total;
            this.tableData = res.data.list;
            this.tableData.forEach(item => {
              item["orgName"] = this.getOrgName(item.organ);
              item["archtypeName"] = this.getArchtypeName(item.archtype);
              item["flag01Name"] = this.getFlag01Name(item.flag01);
            })
          } else {
            this.$message.error("无符合条件任务！");
          }
        }).catch(err => {
          this.cancle();
        })
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      // 清除查询条件
      resetSearch() {
        this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
      },
      // vip权限拦截
      interceptVip(row,index) {
        let rowStr = JSON.stringify(row);
        if (rowStr.indexOf("****") > -1) {
          return false;
        }
        return true;
      },
    },
  }
</script>

<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e1e1e1;

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }

      .fastQuery_item {
        margin: 0 10px;
      }

      .item_default {
        .el-button {
          color: #409EFF !important;
          border-color: #c6e2ff !important;
          background-color: #ecf5ff !important;
        }

      }

      .moreCondition {
        color: #68a3fc;
        cursor: pointer;
        padding: 6px 0px;

        .el-icon-d-arrow-right {
          transform: rotate(90deg);
        }

        .el-icon-d-arrow-left {
          transform: rotate(-90deg);
        }
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;
  }

  .search_container {
    padding: 20px 20px 0 20px;
    //    border-top: 1px solid #e1e1e1;
  }

  .common-box {
    padding-bottom: 15px;
  }

  .common-lab {
    line-height: normal !important;
    text-align: right;

    .labelName {
      text-align: right;
    }
  }
</style>
